<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-01 20:16:53
 * @FilePath: /src/views/service/billboard/components/billboardInformation.vue
 * @LastEditTime: 2021-07-16 10:55:25
 * @LastEditors: luojiajun
-->
<template>
    <el-row class="billboard-information">
        <el-col>
            <div class="tree-title">接口变更信息</div>
            <el-table
                v-loading="loading"
                :data="tableList"
                :max-height="mapHeight"
                border
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column
                    label="接口服务名称"
                    prop="apiName"
                ></el-table-column>
                <el-table-column
                    label="服务英文名称"
                    prop="apiNameEn"
                ></el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column
                    label="变更内容"
                    prop="infoUpdateContent"
                ></el-table-column>
                <el-table-column
                    label="变更人"
                    prop="updateBy"
                ></el-table-column>
                <el-table-column
                    label="变更时间"
                    prop="updateTime"
                ></el-table-column>
            </el-table>
            <pagination
                v-show="totalNum > 0"
                :total="totalNum"
                :page.sync="ruleForm.pageNum"
                :limit.sync="ruleForm.pageSize"
                @pagination="fetchData"
            ></pagination>
        </el-col>
    </el-row>
</template>

<script>
import { getHeight } from "@/utils/zkComm";
import { getInterfaceChangeInfo } from "@/api/dataService/application.js";

export default {
    name: "billboardInformation",
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30
            },
            tableList: [],
            totalNum: 0,
            mapHeight: undefined
        };
    },
    created() {
        this.fetchData();
    },
    mounted() {
        this.mapHeight = getHeight(true);
    },
    methods: {
        fetchData() {
            let params = {
                pageNum: this.ruleForm.pageNum,
                pageSize: this.ruleForm.pageSize,
            }
         
            getInterfaceChangeInfo(params).then(res => {
                if (res.code == 200) {
                    this.tableList = res.data.records;
                    this.totalNum = res.data.total;
                }
                this.loading = false;

            }).catch(() => {
                this.loading = false;
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.billboard-information {
    padding: 20px;

    .tree-title {
        font-size: 16px;
        font-weight: 400;
        color: #5a5a5a;
        line-height: 20px;
        padding-left: 6px;
        margin: 5px 0 20px;
        border-left: 2px solid #1183f8;
    }
}
</style>
